<template>
	<view>
		<view class="box-content lvli">
			<view class="lvli-list">
				<view class="lvli-list-left">
					<!-- <view class="lvli-list-spot">
						<image :src="ossUrl + `/static/index/21.png`" mode=""></image>
					</view> -->
					<view class="lvli-list-line"></view>
				</view>
				<view class="lvli-list-rig" :style="{paddingBottom: index === 2 ? '0rpx' : '81rpx'}">
					<view class="lvli-list-rig-btn" @click="add">
						<image :src="ossUrl + `/static/editData/添加.png`" mode=""></image>
					</view>
				</view>
			</view>
			<view class="lvli-list" v-for="(it,index) in form.career">
				<view class="lvli-list-left">
					<view class="lvli-list-spot">
						<image :src="ossUrl + `/static/index/21.png`" mode=""></image>
					</view>
					<view class="lvli-list-line" v-if="index < (form.career.length - 1)"></view>
				</view>
				<view class="lvli-list-rig" :style="{paddingBottom: index === (form.career.length - 1) ? '0rpx' : '81rpx'}">
					<view class="lvli-list-rig-content" v-if="!it.isEdit">
						<view class="lvli-list-rig-tx">
							{{it.label}}
						</view>
						<image :src="ossUrl + `/static/editData/5.png`" mode="" @click="setShow(it)"></image>
						<view class="lvli-list-rig-content-edit" v-if="it.show">
							<view @click="del(index)">
								<image :src="ossUrl + `/static/editData/删除.png`" mode=""></image>
								删除
							</view>
							<view @click="setEdit(it)">
								<image :src="ossUrl + `/static/editData/4.png`" mode=""></image>
								修改
							</view>
						</view>
					</view>
					<view class="lvli-list-rig-input" v-else>
						<textarea placeholder="请输入" placeholder-class="ac" v-model="it.label" :cursor-spacing="110"/>
					</view>
				</view>
			</view>
		</view>
		<view class="form-btn" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		InformationCareer,InformationEditCareer
	} from '@/common/http/api.js'
	export default {
		data(){
			return {
				info: '',
				form:{
					id: '',
					career: []
				},
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.form.id = e.id
			this.init()
		},
		methods:{
			init(){
				uni.showLoading()
				InformationCareer({business_card_id: this.id}).then(res=>{
					if(Array.isArray(res.data) && res.data.length > 0){
						this.form.career = res.data.map(i=>({
							label: i,
							show: false,
							isEdit: false
						}))
					} else {
						this.add()
					}
					
					
				}).finally(err=>{
					uni.hideLoading()
				})
			},
			add(){
				this.form.career.unshift({
					label:'',
					show: false,
					isEdit: true
				})
			},
			setShow(it){
				console.log('it',it)
				it.show = !it.show
			},
			setEdit(it){
				it.isEdit = true
				it.show = false
			},
			del(index){
				this.form.career.splice(index,1)
			},
			submit(){
				if(this.form.career.some(i=>i.label === '')){
					uni.showToast({duration:3000,
						title:'请输入履历',
						icon:'none'
					})
					return
				}
				let data = {
					...this.form,
					career: JSON.stringify(this.form.career.map(i=> i.label)) ,
					business_card_id: this.id
				}
				uni.showLoading({
					mask: true
				})
				InformationEditCareer(data).then(res=>{
					uni.showToast({duration:3000,
						title:'保存成功',
						icon:'none'
					})
					this.$store.commit('setIsRefresh', true)
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				}).finally(err=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}
	image {
		width: 100%;
		height: 100%;
	}
	.form-btn {
		margin: 0 auto;
		width: 690rpx;
		height: 80rpx;
		background: #23B97F;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
		margin-top: 40rpx;
	}
	.lvli {
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 38rpx 26rpx;
		
	
		.lvli-list {
			display: flex;
	
			.lvli-list-left {
				width: 30rpx;
				height: auto;
				position: relative;
	
				.lvli-list-spot {
					width: 30rpx;
					height: 30rpx;
				}
	
				.lvli-list-line {
					width: 1rpx;
					height: calc(100% - 60rpx);
					background: #FFCC02;
					position: absolute;
					top: 30rpx;
					left: 0;
					right: 0;
					bottom: 0;
					margin-top: 20rpx;
					margin: auto;
					transform: translateX(-50%);
				}
			}
	
			.lvli-list-rig {
				flex: 1;
				margin-left: 21rpx;
				
				padding-bottom: 81rpx;
				
				.lvli-list-rig-btn {
					width: 488rpx;
					height: 80rpx;
					background: #EFEFEF;
					border-radius: 35rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 27rpx;
						height: 27rpx;
					}
				}
				.lvli-list-rig-content {
					width: 100%;
					display: flex;
					position: relative;
					.lvli-list-rig-tx {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
						flex: 1;
					}
					image {
						width: 42rpx;
						height: 42rpx;
					}
					.lvli-list-rig-content-edit {
						display: flex;
						width: 277rpx;
						height: 75rpx;
						background: #EAEAEA;
						border-radius: 20rpx;
						position: absolute;
						bottom: -23px;
						right: 27px;
						box-sizing: border-box;
						padding: 15rpx 0;
						view {
							flex: 1;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 12rpx;
							}
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #292929;
						}
						view:first-child::after{
							content: "";
							width: 1rpx;
							height: 100%;
							background: #908E8E;
							position: absolute;
							right: 0;
							top: 0;
						}
					}
				}
				.lvli-list-rig-input {
					textarea {
						width: 100%;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
						height: 200rpx;
						box-sizing: border-box;
						padding: 15rpx;
						background: #F6F7F8;
					}
					.ac {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #131313;
					}
				}
			}
		}
	}
</style>